<template>
  <div class="actionSheet-warp" v-if="isShow">
    <transition name="fadeShow">
      <div class="gray-cover" v-show="wrapShow" @click="cancel"></div>
    </transition>
    <transition name="slideUp">
      <div v-show="itemShow">
        <ul class="action-ul">
          <li class="action-li"
              v-for="(item,index) in actionData"
              :class="item.iconClass"
              :key="index"
              @click="check(item.value)">
            {{item.txt}}
          </li>
        </ul>
        <ul class="action-ul">
          <li class="action-li action-cancel" @click="cancel">取消</li>
        </ul>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    props: {
      isShow: {
        type: Boolean,
        default: false
      },
      actionData: {
        type: Array,
        default: []
      },
    },
    data(){
      return {
        wrapShow: false,
        itemShow: false
      }
    },
    methods: {
      check(i){
        // _methods.actionChat(i);
       this.$emit("check", i);
       this.cancel();
      },
      cancel(){
        this.wrapShow = false;
        this.itemShow = false;
        setTimeout(() => {
          this.$emit("cancel", false);
        }, 200)
      }
    },
    watch: {
      isShow(){
        if (this.isShow) {
          setTimeout(() => {
            this.wrapShow = true;
            this.itemShow = true;
          }, 20)
        }
      }
    }
  }
</script>

